<template>
  <div class="about">
    <el-container>
      <el-header>
        <div>
          <el-menu class="el-menu-demo" mode="horizontal">
            <el-menu-item
              class="rou"
              @click="() => $router.push('/haier')"
              >Haier</el-menu-item
            >
            <el-menu-item class="rou">账号登录</el-menu-item>
            <el-menu-item class="mou"
              ><a
                @click="
                  () =>
                    $router.push({
                      path: '/register',
                      query: { type: 'email' },
                    })
                "
                target="_blank"
                style="color: rgb(50, 190, 255)"
                >注册海尔账号</a
              >
            </el-menu-item>
            <el-menu-item class="mou">
              <a target="_blank">梦享+会员首次激活登录</a>
            </el-menu-item>
          </el-menu>
        </div>
      </el-header>

      <el-main style="padding: 0">
        <div class="main-zj">
          <el-main style="padding: 0">
            <img class="img" :src="url" width="100%" />
            <div>
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>登录海尔账号</span>
                </div>
                <div></div>
                <el-input
                  placeholder="手机号/验证邮箱/用户名"
                  v-model="form.username"
                ></el-input>
                <el-input
                  placeholder="登录密码"
                  v-model="form.password"
                  type="password"
                ></el-input>
                <el-checkbox-group v-model="form.check">
                  <el-checkbox
                    :label="item"
                    v-for="(item, index) in checkList"
                    :key="index"
                    style="display: block"
                  ></el-checkbox>
                </el-checkbox-group>
                <el-button type="primary" @click="login()">登录</el-button>
              </el-card>
            </div>
          </el-main>
        </div>
      </el-main>

      <el-footer style="padding: 0">
        <div class="footer-list">
          <ul>
            <li v-for="(item, index) in info" :key="index">
              <a href="">{{ item }}</a>
            </li>
          </ul>
          <li class="single">
            鲁ICP备09096283 | © 2000-2020 Haier.com. All rights reserved
          </li>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
var img = require("@/assets/static/haier.png");
export default {
  data() {
    return {
      info: ["关于海尔", "联系我们", "法律声明", "帮助中心", "海尔门店"],
      url: img,
      form: {
        check: [],
        username: '',
        password: ''
      },
      checkList: ["我同意", "两周内免登录"],
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    login(){
      this.$haier.post('openapi/login', this.form).then(()=>{
        localStorage.setItem("status", true)
        this.$router.replace({path: '/haier'})
      }).catch(()=>{
        localStorage.setItem("status", false)
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.el-main {
  padding: 0;
}
.rou {
  padding-left: 50px;
  display: inline-block;
  position: relative;
  left: 5%;
}
.mou > a {
  text-decoration: none;
}

.mou {
  padding-left: 50px;
  display: inline-block;
  position: relative;
  left: 60%;
}
.text {
  font-size: 14px;
}
.el-checkbox-group el-checkbox {
  margin-bottom: 10px;
}
.el-button {
  margin-top: 10px;
  width: 360px;
}
.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.el-input {
  margin-bottom: 10px;
}
.box-card {
  width: 400px;
  background-color: white;
  position: absolute;
  right: 350px;
  top: 300px;
}
.main-zj {
  display: inline;
}

.footer-list {
  height: 60px;
  background-color: rgb(43, 44, 45);
  width: 100%;
}
.footer-list ul {
  margin-left: 250px;
}
.footer-list ul li {
  float: left;
  margin-left: 10px;
  font-size: 14px;
}
.footer-list ul li a {
  line-height: 60px;
  color: aliceblue;
  text-decoration: none;
}
.single {
  line-height: 60px;
  float: right;
  margin-right: 70px;
  color: aliceblue;
  font-size: 14px;
}
</style>